<template>
	<view>
		<view class="header">
			<view class="navbar">
				<view class="navbar-fixed">
					<!-- 状态栏小程序撑起高度 -->
					<view :style="{height:statusBarHeight+'px'}"></view>
					<view class="navbar-content" :style="{height:navBarHeight+'px',width:windowWidth+'px'}">
						<image src="../../static/jt6.png" @click="back()"></image>
						<view class="navbar-search">更多分类</view>
					</view>
				</view>
				<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）indexOf-->
				<view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
			</view>
			<view class="searchbox" @click="togoodslist()">
				<view class="search">
					<view class="scan">
						<image src="../../static/ss.png"></image>
					</view>
					<view class="inputbox">
						<input v-model="keyword" placeholder="搜索商品" />
					</view>
					<view class="searchbut" @click="tosearch()">搜索</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="leftbox">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" 
					@scrolltolower="catelower" @scroll="scroll">
					<view class="scroll-view-item" v-for="(item,index) in catelist" :key="index" 
					@click="handleone(index,item)" :style="{'background':index==currone?'#FFF':''}">
						<view v-if="index==currone" class="tit"></view>
						<view>{{item.cate_name}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="rightbox">
				<!-- <view class="secondary">
					<view class="somebox">
						<view class="sometip" v-for="(item,index) in tiplist" :key="index" @click="handletwo(index)"
						:style="{'background':index!==currtwo?'#F7F7F7':'','color':index==currtwo?'#FF6229':''}">
							{{item}}
						</view>
					</view>
					<view class="yin"></view>
					<view class="opensecondary">
						<image src="../../static/xia.png"></image>
					</view>
				</view> -->
				<view class="threelevel">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-g" 
						@scrolltolower="lower" @scroll="scroll">
						<view class="listbox" v-for="(item,index) in list" :key="index" @click.stop="todetail(item)">
							<view class="imgbox">
								<image :src="item.url"></image>
							</view>
							<view class="infobox">
								<view class="namebox">{{item.goods_name}}</view>
								<!-- <view class="catebox">小吉他 | 玩具</view> -->
								<view class="salenum">库存{{item.stock_total}}</view>
								<view class="numbox">
									<view class="price">￥{{parseFloat(item.goods_price_min)}}<text v-if="parseFloat(item.score_price)!==0">+{{parseFloat(item.score_price)}}</text></view>
									<!-- <view class="num">
										<image src="../../static/jian.png" @click.stop="jian(item,index)"></image>
										<view class="number">{{item.num}}</view>
										<image src="../../static/add.png" @click.stop="add(item,index)"></image>
									</view> -->
								</view>
							</view>
						</view>
					</scroll-view>
					
				</view>
			</view>
			<!-- <view style="height: 120rpx;"></view>
			<view class="navbut">
				<view class="leftbox">
					<image src="../../static/gwc.png"></image>
					<view class="numbox">
						<view>合计</view>
						<view>￥{{totalPrice}}<text v-if="scorePrice!==0">+{{scorePrice}}积分</text></view>
					</view>
				</view>
				<view class="rightbox" @click="tosumbit()">
					<view>去结算</view>
				</view>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				/* 状态栏高度 */
				navBarHeight: 45,
				/* 导航栏高度 */
				windowWidth: 375,
				/* 窗口宽度 */
				/* 设定状态栏默认高度 */
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				leftlist:['玩具乐器','男鞋女鞋','箱包服饰','个护美妆','乳饮酒水'],//一级分类列表
				currone:"",//一级分类索引
				tiplist:['全部','早教启智','敲打玩具'],//二级分类列表
				currtwo:'',//二级分类索引
				catelist:[],
				cate_id:'',
				list:[],
				is_data:true,
				keyword:'',
			}
		},
		computed: {
				// 计算选中商品数量
				// totalNum() {
				// 	let totalNum = 0;
				// 	this.list.map(item => {
				// 		item.flag ? totalNum += item.count : totalNum += 0
				// 	})
				// 	return totalNum
				// },
				scorePrice() {
					console.log(this.list)
					let scorePrice = 0;
					this.list.map(item => {
						scorePrice += item.num * parseFloat(item.score_price) 
					})
					console.log(scorePrice)
					return scorePrice
				},
				//计算选中商品的总价
				totalPrice() {
					console.log(this.list)
					let totalPrice = 0;
					this.list.map(item => {
						totalPrice += item.num * parseFloat(item.goods_price_min) 
					})
					console.log(totalPrice)
					return totalPrice
					// return parseFloat(totalPrice.toFixed(2)) // 保留小数点后2位
				}
			},
		onShow() {
			this.getnav()
		},
		onLoad(option) {
			this.cate_id = option.id
			this.getcate()
		},
		methods: {
			getnav() {
				// 获取手机系统信息
				const info = uni.getSystemInfoSync()
				// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
				this.statusBarHeight = info.statusBarHeight
				this.windowWidth = info.windowWidth
				// 除了h5 app mp-alipay的情况下执行
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				// 获取胶囊的位置
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				console.log(menuButtonInfo);
				// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
				this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
					.statusBarHeight)
				this.windowWidth = menuButtonInfo.left
				// #endif
			},
			togoodslist() {
				uni.navigateTo({
					url: '/pages/goodslist/goodslist'
				})
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			catelower: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				
				this.is_data&&this.getgoods(this.cate_id)
				console.log(e)
			},
			//一级分类
			handleone(index,item){
				this.page = 1
				this.list = []
				this.currone = index
				this.cate_id = item.id
				this.getgoods(item.id)
			},
			//二级分类
			handletwo(index){
				this.currtwo = index
			},
			getcate(){
				this.$http({
					url:'/api/Wechat/cateList',
				}).then(res=>{
					this.catelist = res.data
					this.catelist.unshift({
						id: '',
						cate_name: "全部"
					})
					if(this.cate_id==''){
						this.currone = 0
					}else{
						this.currone = this.catelist.findIndex(item =>item==this.cate_id)
					}
					this.getgoods(this.cate_id)
				})
			},
			todetail(item){
				uni.navigateTo({
					url:'/pageshop/goodsinfo/goodsinfo?id='+item.id
				})
			},
			getgoods(id){
				this.$http({
					url:'/api/Wechat/getGoodsByCateId',
					data:{
						cate_id:id||'',
						page:this.page,
						limit:20,
					}
				}).then(res=>{
					if(res.data.length){
						this.list.push(...res.data)
						this.list.forEach(item=>{
							item.num=0
						})
						console.log(this.list)
						this.page++
						return
					}
					this.is_data = false
				})
			},
			jian(item,index){
				if(item.num!==0){
					item.num--
				}else{
					uni.showToast({
						title:'该宝贝不能再减少了',
						icon:'none'
					})
				}
				
			},
			add(item,index){
				if(item.num>=item.stock_total){
					uni.showToast({
						title:'该宝贝库存不够了',
						icon:'none'
					})
				}else{
					// const infos = {
					// 	token: uni.getStorageSync('token'),
					// 	goods_id: String(item.id).split(','),
					// 	spec_id: this.spec_id,
					// 	goods_num: String(this.count).split(','),
					// 	goods_price: String(this.totalPrice).split(','),
					// 	delivery_method: 1,
					// 	order_total_money: this.totalPrice,
					// 	order_pay_money: this.totalPrice,
					// 	address_id: this.addressid,
					// 	//是否代理商字段 is_agent 0否 1是
					// 	unit_price: this.limitinfo[0].goods_price,
					// 	line_price: this.limitinfo[0].line_price || item.line_price_min,
					// 	jifen:this.jifen,//是否是积分商品
					// }
					item.num++
				}
			},
			// changeSelect(index, id, item) {
			// 	this.specList[index].select = id
			// 	const nums = this.specList.map(item => item.select).join('_')
			// 	// this.spec_id = this.spec_id.push(nums)
			// 	this.limitinfo = this.info.skuList.filter(item => item.goods_sku_id == nums)
			// 	this.spec_id = [nums]
			// 	console.log(this.limitinfo, 'this.limitinfo', nums, this.spec_id)
			// },
			tosearch(){
				uni.navigateTo({
					url:'/pageshop/searchgoods/searchgoods?keyword='+this.keyword
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			tosumbit(){
				const tlist = this.list.filter((item)=>{
					return item.num>0
				})
				console.log(tlist,'tlist')
				uni.navigateTo({
					url:'/pageshop/submitorder/submitorder?list='+encodeURIComponent(JSON.stringify(tlist))
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
		overflow: hidden;
	}
</style>
<style lang="scss" scoped>
	.header {
		height: 22vh;
		background: linear-gradient(180deg, #FFD3D2 0%, #F7F7F7 100%);
		width: 100%;
	}

	.navbar {
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 399;
			width: 100%;
			// height: 102rpx;
			// padding-bottom: 20rpx;
			background: transparent;


			.navbar-content {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0rpx 30rpx;
				// height: 142rpx;
				box-sizing: border-box;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}

				.navbar-search {
					display: flex;
					align-items: center;
					// padding: 0 10px;
					width: 100%;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222;

				}

			}
		}
	}

	.searchbox {
		width: 100%;
		height: 134rpx;
		display: flex;
		align-items: center;
		// margin-top: 40rpx;

		.search {
			width: 690rpx;
			height: 40rpx;
			padding: 15rpx 0;
			background: #FFFFFF;
			border-radius: 36rpx;
			// border: 2rpx solid #F94D29;
			display: flex;
			align-items: center;
			margin: 0 auto;

			.scan {
				width: 76rpx;
				text-align: center;
				border-right: solid 2rpx #F2F2F2;

				image {
					width: 33rpx;
					height: 28rpx;
				}
			}

			.inputbox {
				width: 448rpx;
				height: 40rpx;
				padding: 0 24rpx;

				>input {
					width: 100%;
				}
			}

			.searchbut {
				width: 112rpx;
				height: 62rpx;
				background:#FF8A9B;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #F7F7F7;
				line-height: 62rpx;
				text-align: center;
			}
		}
	}

	.box {
		height: 78vh;
		display: flex;
		background-color: #FFF;
		width: 100%;
		.leftbox {
			width: 172rpx;
			background-color: #F7F7F7;
			.scroll-Y {
				height: 68vh;
				
				.scroll-view-item {
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #222222;
					position: relative;
					.tit{
						position: absolute;
						left: 0;
						width: 6rpx;
						top: 10rpx;
						height: 64rpx;
						background: #FF8A9B;
						border-radius: 20rpx ;
					}
				}
			}
		}
		.rightbox{
			width: 578rpx;
			height: 78vh;
			.secondary{
				width: 578rpx;
				height: 84rpx;
				background-color: #F7F7F7;
				display: flex;
				border-bottom: 2rpx solid #F5F5F5;
				.somebox{
					display: flex;
					align-items: center;
					width: 502rpx;
					background-color: #FFF;
					.sometip{
						height: 50rpx;
						background: linear-gradient(90deg, #FFE9E1 0%, #FFF8F5 100%);
						border-radius: 8rpx;
						width: fit-content;
						padding: 0 18rpx;
						line-height: 50rpx;
						margin: 0 8rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #222222;
					}
				}
				.yin{
					width: 14rpx;
					height: 84rpx;
					background: linear-gradient(270deg, #E8E8E8 0%, rgba(232,232,232,0) 100%);
					opacity: 1;
				}
				.opensecondary{
					width: 72rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 27rpx;
						height: 15rpx;
					}
				}
			}
			.threelevel{
				width: 578rpx;
				height: 75vh;
				background-color: #FFF;
				.scroll-g{
					height: 75vh;
					.listbox{
						display:flex;
						align-items:center;
						.imgbox{
							width: 220rpx;
							text-align: center;
							image{
								width: 180rpx;
								height: 180rpx;
							}
						}
						.infobox{
							width: 330rpx;
							.namebox{
								font-size: 30rpx;
								font-family: Source Han Sans CN-Medium, Source Han Sans CN;
								font-weight: 500;
								color: #000000;
								-webkit-line-clamp: 2;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.catebox{
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #AC7E27;
							}
							.salenum{
								font-size: 20rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #888888;
								margin: 10rpx 0;
							}
							.numbox{
								display: flex;
								align-items: center;
								justify-content: space-between;
								.price{
									font-size: 30rpx;
									font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
									font-weight: normal;
									color: #FF6178;
								}
								.num{
									display: flex;
									align-items: center;
									image{
										width: 40rpx;
										height: 40rpx;
									}
									.number{
										width: 50rpx;
										text-align: center;
									}
								}
							}
						}
					}
				}
			}
		}
		.navbut{
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 48rpx;
			opacity: 1;
			position: fixed;
			bottom: 0;
			z-index: 199;
			display: flex;
			align-items: center;
			justify-content: center;
			.leftbox{
				width: 480rpx;
				height: 96rpx;
				border-radius: 48rpx 0rpx 0rpx 48rpx;
				background-color: #1C1C1C;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #FFFFFF;
				image{
					width: 44rpx;
					height: 42rpx;
					margin: 0 30rpx;
				}
			}
			.rightbox{
				width: 210rpx;
				height: 96rpx;
				background: #FF8A9B;
				border-radius: 0rpx 48rpx 48rpx 0rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 96rpx;
			}
		}
	}
</style>
